body,
html,
#___gatsby,
#gatsby-focus-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.theme-react-native-firebase {
  --color-primary: #e88533;
  --color-primary-hover: #c86731;
}

main a {
  border-bottom: 1px dotted gray;
}

main a:hover {
  border-bottom: 1px solid gray;
}

main p,
main li {
  @apply text-gray-800;
}

li code,
p code,
table code {
  @apply tracking-wide px-1 rounded bg-gray-200 text-sm;
  color: var(--color-primary);
}

blockquote p {
  @apply text-white;
  a,
  a:hover {
    border-bottom-color: #fff;
  }
}

table {
  @apply w-full mb-6;

  th {
    @apply bg-gray-100 text-left p-2 font-semibold border-t border-b text-base;
  }

  td {
    @apply p-2 text-base border-b overflow-hidden;
    overflow: unset;
  }

  tbody tr:nth-child(even) {
    @apply bg-gray-100;
  }

  p {
    word-break: break-word;
  }
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  font-size: 0.9em;
  padding: 0 6px;
}

.parameter {
  @apply text-blue-500;
}

.type {
  @apply text-teal-500;
}

.reference {
  @apply text-orange-500;
}
